<template>
  <div class="app-container">


    <!-- vxe检索数据组件 -->
    <!-- <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"

      @searchEventEmit="searchEventEmit"
      @resetSearchEventEmit="resetSearchEventEmit"
    >
    </search-form> -->


    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading.sync="loading"
      :isVxeColSeq="false"
      :isVxeToolbar="false"
      :isVxeCheckbox="false"
      :isDelButton="false"
      :isUpdateButton="false"
      @customSortMethodEmit="customSortMethodEmit"
    >
      <!-- 操作栏按钮扩展插槽 -->
      <template v-slot:handleExtend="{row}">
        <template v-if="row.status == '3'">
          &nbsp;
          <el-button v-if="true" size="mini" type="text" @click="viewExceptionMsg(row)">
            异常信息
          </el-button>
        </template>
      </template>
    </ex-base-table>

    <!-- 分页组件 -->
    <Pagination
      v-show="tablePage.totalResult>0"
      :total="tablePage.totalResult"
      :page.sync="tablePage.currentPage"
      :limit.sync="tablePage.pageSize"
      @pagination="pageFindList"
    />


    <!-- 表单提价组件 -->
    <!-- <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData.sync="formSubmitData"
      :curveDeadlineList="curveDeadlineList"
      :curveDeadlineSetList="curveDeadlineSetList"
      :whsymbolOptions="whsymbolOptions"
      :rtsymbolOptions="rtsymbolOptions"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </submit-form> -->
    <el-dialog
      :title="'异常信息（' + exceptionInformation.node_name + ')'"
      :visible.sync="dialogVisible"
      width="40%"
      append-to-body
      >
      <span>{{exceptionInformation.remark}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
</el-dialog>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

import {
  processMonitoring,
  finderror
} from './service/baseApi'
// 基础表格组件
import ExBaseTable from './components/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'
// 文章表单
import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from './components/SearchForm'

import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData],
  components: {
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm,
  },
  props: {
    /* 当前行数据 */
    currentRow: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {},

      // 排除条件
      sortField: '',
      sortFlag: '',

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: '',
        wh_symbol: '', //曲线名称
        l_str: '', //币种
        field_ch: '', //失效日期
        rt_symbol: '', //期限方案id
        rl_values: '',
        r_str: '',
        remark: ''
      },
      initFormSubmitData: {
        id: '',
        wh_symbol: '', //曲线名称
        l_str: '', //币种
        field_ch: '', //失效日期
        rt_symbol: '', //期限方案id
        rl_values: '',
        r_str: '',
        remark: ''
      },
      // 曲线期限 curveDeadlineList 
      curveDeadlineList: [],
      // 曲线期限设置参数
      curveDeadlineSetList: [],
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据

      /* 子表相关 */
      DialogSonTableVisible: false,

      whsymbolOptions: [],
      rtsymbolOptions: [],
      /* 监听属性 watch API */
      /* 是否是更新DOM初始化操作 */
      isUpdateDOMInit: false,

      /* 曲线图 */
      chartTitle: '',
      DialogChartVisible: false,

      lineChartColors: [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc'
      ],
      dialogVisible: false,//警告提示
      exceptionInformation: {}, //异常信息 
    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {
    currentRow() {
      this.findList()
    },


  },
  // 方法集合
  methods: {


    /* API数据操作相关 */
    // 获取期限设置数据
    getDeadlineSetList() {


    },
    // 查询数据
    findList() {
      this.loading = true

      // 请求表格数据
      processMonitoring({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        // sortField: this.sortField,
        // sortFlag: this.sortFlag,
        id: this.currentRow.id,
        // ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    pageFindList() {

      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        {field: 'node_code', title: '节点编号',with: 200},
        {field: 'node_name', title: '节点名称'},
        {field: 's_time', title: '执行开始时间', width: 200},
        {field: 'e_time', title: '执行结束时间', width: 200},
        {field: 'cs_time', title: '已耗时（分）', width: 100},
        {field: 'name', title: '运行状态', width: 100},
      ]
      this.tableColumn = tabCols;
    },

    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      this.tablePage.currentPage = 1
      this.findList()
    },
    /* 排序 */
    customSortMethodEmit(property, order) {
      this.sortField = property
      this.sortFlag = order
      this.findList()

    },

    /* 异常信息 */
    viewExceptionMsg(row){
      finderror({id:row.id}).then(({data}) => {
      console.log(data)
      this.exceptionInformation=data.rows[0]
      this.dialogVisible = true
      })
      //  this.$alert(`${row.remark}`, '异常信息(' + row.node_name + ')', {
      //     dangerouslyUseHTMLString: true,
      //   });
    }


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>